<template>
    <view class="container">
        <view class="group_item" style="height: 80upx;font-size: 35upx; font-weight: bold;">
              基本信息
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>姓名
            </view>
            <input type="text" v-model="egressRecord.name" placeholder="请输入登记人" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>性别
            </view>
            <view class="picker_class">
            <radio-group @change="radioChange" v-model="egressRecord.sex">
                <label class="radio"><radio value="男" checked="true" style="transform: scale(0.6);"/>男</label>
                <label class="radio"><radio value="女" style="transform: scale(0.6);margin-left:10upx"/>女</label>
            </radio-group>
            </view>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>民族
            </view>
            <input type="idcard" v-model="egressRecord.nation" placeholder="请输入民族" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>出生年月
            </view>
            <input type="text" v-model="egressRecord.year" placeholder="请选择出生年月" class="picker_class" @click="showDateTime"/>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>社会保障卡号
            </view>
            <input type="idcard" v-model="egressRecord.inputIdCard" placeholder="请输入社保卡号" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>联系电话
            </view>
            <input type="idcard" v-model="egressRecord.phone" placeholder="请输入联系电话" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>身份证
            </view>
            <input type="idcard" v-model="egressRecord.identitCard" placeholder="请输入身份证" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>户籍所在地址
            </view>
            <input type="text" v-model="egressRecord.inputTarget" placeholder="请选择户籍地址" class="picker_class" @click="showTarget"/>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>居住地址
            </view>
            <input type="text" v-model="egressRecord.address" placeholder="居住地址" class="picker_class" @click="showTarget"/>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>邮编
            </view>
            <input type="idcard" v-model="egressRecord.code" placeholder="请输入邮政编码" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>户籍性质
            </view>
            <view class="picker_class">
                <radio-group @change="radioChange" v-model="egressRecord.resourceType">
                    <label class="radio"><radio value="农业" checked="true" style="transform: scale(0.6);"/>农业</label>
                    <label class="radio"><radio value="非农业" style="transform: scale(0.6);margin-left:10upx"/>非农业</label>
                </radio-group>
            </view>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>参保登记时间
            </view>
            <input type="text" v-model="egressRecord.inputTime" placeholder="请选择登记时间" class="picker_class" @click="showDateTime"/>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>开户银行
            </view>
            <input type="idcard" v-model="egressRecord.bank" placeholder="请输入开户银行" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>银行账号
            </view>
            <input type="idcard" v-model="egressRecord.bankNumber" placeholder="请输入银行账号" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>个人缴费额
            </view>
            <input type="idcard" v-model="egressRecord.payNumber" placeholder="请输入缴费额" class="picker_class" />
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>特殊参保群体
            </view>
            <view class="picker_class">
                <radio-group @change="radioChange" v-model="egressRecord.resourceType">
                    <label class="radio"><radio value="低保对象" checked="true" style="transform: scale(0.6);"/>低保对象</label>
                    <label class="radio"><radio value="计划生育" style="transform: scale(0.6);margin-left:10upx"/>计划生育</label>
                </radio-group>
            </view>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>职工养老保险
            </view>
            <view class="picker_class">
                <radio-group @change="radioChange" v-model="egressRecord.resourceType">
                    <label class="radio"><radio value="是" checked="true" style="transform: scale(0.6);"/>是</label>
                    <label class="radio"><radio value="否" style="transform: scale(0.6);margin-left:10upx"/>否</label>
                </radio-group>
            </view>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>农民社会保障
            </view>
            <view class="picker_class">
                <radio-group @change="radioChange" v-model="egressRecord.resourceType">
                    <label class="radio"><radio value="是" checked="true" style="transform: scale(0.6);"/>是</label>
                    <label class="radio"><radio value="否" style="transform: scale(0.6);margin-left:10upx"/>否</label>
                </radio-group>
            </view>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>老农保
            </view>
            <view class="picker_class">
                <radio-group @change="radioChange" v-model="egressRecord.resourceType">
                    <label class="radio"><radio value="是" checked="true" style="transform: scale(0.6);"/>是</label>
                    <label class="radio"><radio value="否" style="transform: scale(0.6);margin-left:10upx"/>否</label>
                </radio-group>
            </view>
        </view>
        <view class="group_item">
            <view class="group_title">
                <span style="color: red;">*</span>其他
            </view>
            <view class="picker_class">
                <radio-group @change="radioChange" v-model="egressRecord.resourceType">
                    <label class="radio"><radio value="是" checked="true" style="transform: scale(0.6);"/>是</label>
                    <label class="radio"><radio value="否" style="transform: scale(0.6);margin-left:10upx"/>否</label>
                </radio-group>
            </view>
        </view>
        <view class="group_item">
            <view class="group_title1">
                附件上传
                <robby-image-upload v-model="imageUrlList" fileKeyName="files" :header="header" :formData="formData"
                                    :server-url="uploadUrl" :showUploadProgress="true" limit="6"></robby-image-upload>
            </view>
        </view>
        <view class="group_item" >
            <view class="group_title">
                电子签名
            </view>
            <view>
            <button type="primary" class="button_class1" @click="navTo('/package_biz/pages/declare/qm')" >点击签名</button>
            </view>
        </view>
        <view class="group_item">
            <view class="button_title">
                <button type="primary" class="button_class" @click="addRegistration">提交</button>
            </view>
        </view>
        <view>
            <wPicker
                    mode="dateTime"
                    @confirm="confirmDate"
                    ref="dateTime"
                    themeColor="#f00"
                    :current="true"
            ></wPicker>
            <wPicker
                    mode="region"
                    @confirm="confirmTarget"
                    ref="targetRegion"
                    themeColor="#f00"
                    :defaultVal="defaultSourceRegion"
                    :hideArea="false"
            ></wPicker>
        </view>
    </view>
</template>

<script>
    import wPicker from "@/components/w-picker/w-picker.vue";
    import {
        mapState,
        mapMutations
    } from 'vuex';
    export default {
        data() {
            return {
                egressRecord:{
                    name: '',//姓名
                    sex:'',//性别
                    nation:'',//民族
                    year:'',//出生年月
                    phone:"",//联系电话
                    identitCard:'',//身份证
                    code:'',//邮编
                    inputIdCard:"",
                    bank:'',//开户银行
                    bankNumber:'',//银行账号
                    inputTime:"",
                    resourceType:"国内",
                    address:'',//居住地址
                    payNumber:'',//个人缴费额
                    inputTarget:"",
                },
                imageUrlList: [],
                header: {
                    appId: uni.getStorageSync("appId")
                },
                formData: {},
                uploadUrl: this.$api.request.apiBaseUrl + 'checkImg/WXImgSecCheck',
                defaultSourceRegion:["四川省","成都市","武侯区"]
            }
        },
        onLoad() {

        },
        methods: {
            navTo(url){
                console.log(url)
                uni.navigateTo({
                    url:url
                })
            },
            addRegistration() {
                uni.navigateBack()
            },
            radioChange(e){
                this.egressRecord.resourceType = e.detail.value
            },
            showTarget(){
                this.$refs['targetRegion'].show();
            },
            confirmTarget(e){
                this.egressRecord.inputTarget = e.result
            },
            showDateTime(){
                this.$refs['dateTime'].show();
            },
            confirmDate(e){
                this.egressRecord.inputTime = e.result
            }
        },
        components: {
            wPicker
        }
    }
</script>

<style scoped>
    .container {
        width: 100%;
        background-color: #FBFBFB;
        overflow: hidden;
    }

    .group_item {
        width: 100%;
        padding: 0upx 30upx;
        margin: 10upx 0;
        display: flex;
        flex-direction: row;
        background-color: white;
    }

    .group_item1 {
        width: 100%;
        padding: 10upx 30upx;
        margin: 10upx 0;
        background-color: white;
        overflow: hidden;
    }

    .group_title1 {
        width: 230upx;
        font-size: 30upx;
        font-weight: bold;
    }

    .group_title {
        width: 300upx;
        padding-top: 30upx;
        /* height: 100upx; */
        /* line-height: 100upx; */
        font-size: 30upx;
        font-weight: bold;
    }

    .picker_class {
        width: 100%;
        height: 100upx;
        line-height: 100upx;
        margin-left: 30upx;
        font-size: 28upx;
        padding-left: 10upx;
    }

    .picker_content_class {
        width: 100%;
        height: 200upx;
        margin-top: 30upx;
        margin-left: 30upx;
        font-size: 28upx;
        padding-left: 10upx;
    }

    input {
        padding-left: 10upx;
    }

    .button_class {
        bottom: 40upx;
        margin-top: 20upx;
        width: 80%;
        margin-left: 10%;
        height: 80upx;
        line-height: 80upx;
        border-radius: 40upx;
        background-color: #1DA3EE !important;
        color: white
    }
    .button_class1 {
        bottom: 15upx;
        margin-top: 30upx;
        width: 80%;
        margin-left: 80%;
        height: 70upx;
        line-height: 70upx;
        background-color: #1DA3EE !important;
        color: white
    }
    .button_title{
        width: 100%;
        padding-top: 60upx;
        /* height: 100upx; */
        /* line-height: 100upx; */
        font-size: 30upx;
        font-weight: bold;
    }
</style>
